<div class="flex min-h-full">
    <AzimuttWeb.Components.Step.step steps={get_steps("About you")} />
    <div class="flex flex-col items-center justify-center px-4 py-12 mx-auto mt-0 sm:px-6 lg:px-8">
        <div>
            <%= render AzimuttWeb.LayoutView, "_flash.html", conn: @conn %>
            <%= render "_background_grid.html" %>
            <h2 class="text-2xl font-bold tracking-tight text-gray-900 md:text-3xl xl:text-4xl">How will you use Azimutt?</h2>
            <p class="mt-6 mb-4 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-lg">
                Let us build the best setup for you, allowing to configure everything you will need from the start without digging in all the features and settings 😉
            </p>
            <div class="py-4 text-center">
                <%= link "I'm flying solo", to: Routes.user_onboarding_path(@conn, :solo_or_team_next, %{user_profile: %{usage: "solo"}}), method: :post,
                    class: "inline-block rounded-md bg-gray-900 px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 text-center
                    focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
                %>
                <span class="px-8 text-gray-600">or</span>
                <%= link "I have teammates", to: Routes.user_onboarding_path(@conn, :solo_or_team_next, %{user_profile: %{usage: "team"}}), method: :post,
                    class: "inline-block rounded-md bg-gray-900 px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 text-center
                    focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
                %>
            </div>
            <%= render "_error.html", changeset: @changeset %>
        </div>
    </div>
</div>
